<template>
  <div class="communication">
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 50%"
      :height="width"
    >
      <el-table-column label="项目" fixed align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.label }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="值" align="center">
        <template #default="scope">
          <el-input
            v-if="scope.row.state"
            v-model="scope.row.value"
            @focus="focusEvent(scope.row, scope.$index, scope.column)"
            @blur="blurEvent(scope.row, scope.$index, scope.column)"
          ></el-input>
          <p @click="cellClick(scope.row, scope.column)" v-else>
            {{ scope.row.value }}
          </p>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, nextTick, onMounted, watch } from "vue";
import { terminalSelectByPos } from "@/api/source.js";
import { useWinSize } from "@/utils/comm.js";
const props = defineProps({
  position: String,
  loading: Boolean,
  currentTypes: {
    type: Number,
    default: 0,
  },
  type: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["changeData"]);
const activeName = ref("first");
const terId = ref();
const width = ref();
const tableData = ref([
  {
    label: "行政区码",
    prop: "districtCode",
    value: "4101",
    state: 0,
    id: 1,
  },
  {
    label: "终端地址",
    prop: "terminalAddress",
    value: "0001",
    state: 0,
    id: 2,
  },
  {
    label: "主站地址",
    prop: "masterStationAddress",
    value: "02",
    state: 0,
    id: 3,
  },
  {
    label: "主站主用IP",
    prop: "masterIp",
    value: "192.168.1.100",
    state: 0,
    id: 4,
  },
  {
    label: "主站主用端口",
    prop: "masterPort",
    value: "7100",
    state: 0,
    id: 5,
  },
  {
    label: "主站备用IP",
    prop: "alternateIp",
    value: "127.0.0.1",
    state: 0,
    id: 6,
  },
  {
    label: "主站备用端口",
    prop: "alternatePort",
    value: "10000",
    state: 0,
    id: 7,
  },
  {
    label: "主站APN",
    prop: "apn",
    value: "CMNET",
    state: 0,
    id: 8,
  },
]);
onMounted(() => {
  watch(
    props,
    (newValue, oldValue) => {
      if (newValue.type === "1") {
      } else if (newValue.type === "2") {
        terminalSelectByPosApi();
      } else {
        if (newValue.currentTypes === 2 || newValue.currentTypes === 6) {
          terminalSelectByPosApi();
        }
      }
      // console.log("commun", newValue);
      emit("changeData", tableData.value);
    },
    { immediate: true },
    { deep: true }
  );
  //判断屏幕尺寸
  const size = useWinSize();
  if (size.width > 1440) {
    if (props.type == "1" || props.type == "2") {
      width.value = 295;
    } else {
      width.value = 295;
    }
  } else {
    if (props.type == "1" || props.type == "2") {
      width.value = 280;
    } else {
      width.value = 200;
    }
  }
});
//通讯参数查询
const terminalSelectByPosApi = async () => {
  let parm = {
    pos: props.position,
  };
  if (props.position) {
    await terminalSelectByPos(parm)
      .then((res) => {
        // console.log("commun", res);
        tableData.value.forEach((item) => {
          if (res.data && res.data != undefined) {
            item.value = res.data[item.prop];
            item.terId = res.data.terId;
          }
        });
        emit("changeData", tableData.value);
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

const cellClick = (row, column) => {
  row.state = !row.state;
};
const focusEvent = (row, index, column) => {
  row.oldValue = row.value;
};
const blurEvent = (row, index, column) => {
  console.log(tableData.value);
  row.state = !row.state;
  if (row.value !== row.oldValue) {
    emit("changeData", tableData.value);
  }
};
defineExpose({
  terminalSelectByPosApi,
});
</script>

<style lang="scss" scoped>
//参数设置
</style>
